<template>
  <div class="row bg-white text-black">
    <q-btn dense class="col-auto" icon="keyboard_arrow_left" @click="scrollLeft"/>
    <q-scroll-area
      ref="tagsViewScroll"
      horizontal
      style="width: 100%"
      class="col q-px-sm bg-grey-4"
    >
      <div class="row no-wrap items-center q-col-gutter-x-sm" style="height: 100%" ref="tagsViewScrollDiv">
        <div v-for="tag in visitedViews" :key="tag.path" class="col-auto">
          <q-btn-group dense size="sm" text-color="black" unelevated color="white">
            <q-btn :label="tag.title" dense size="sm" unelevated
                   :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
                   :text-color="actionTagPath===tag.path?'white':'black'"
                   :color="actionTagPath===tag.path?'secondary':'white'">
              <q-menu
                touch-position
                context-menu
              >
                <q-list dense style="min-width: 100px">
                  <q-item clickable v-close-popup @click="removeAllTags">
                    <q-item-section>
                      <q-item-label>关闭全部</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="removeOtherTagsByBtn(tag, 0)">
                    <q-item-section>
                      <q-item-label>关闭其他</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="removeOtherTagsByBtn(tag, -1)">
                    <q-item-section>
                      <q-item-label>关闭左侧</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="removeOtherTagsByBtn(tag, 1)">
                    <q-item-section>
                      <q-item-label>关闭右侧</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
            <q-btn dense rounded icon="clear" size="xs" color="red" @click="removeTags(tag)"/>
          </q-btn-group>
        </div>
      </div>
    </q-scroll-area>
    <q-btn-dropdown split dense class="col-auto" icon="keyboard_arrow_right" size="md" @click="scrollRight">
      <q-list>
        <q-item clickable v-close-popup @click="removeAllTags">
          <q-item-section>
            <q-item-label>关闭全部</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable v-close-popup @click="removeOtherTags(0)">
          <q-item-section>
            <q-item-label>关闭其他</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable v-close-popup @click="removeOtherTags(-1)">
          <q-item-section>
            <q-item-label>关闭左侧</q-item-label>
          </q-item-section>
        </q-item>
        <q-item clickable v-close-popup @click="removeOtherTags(1)">
          <q-item-section>
            <q-item-label>关闭右侧</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>
  </div>
</template>

<script>
  export default {
    name: 'TagsView',
    data() {
      return {
        position: 0,
        actionTagName: ''
      }
    },
    computed: {
      visitedViews() {
        return this.$store.state.tagsView.visitedViews
      },
      actionTagPath() {
        return this.$store.state.tagsView.actionTagPath
      }
    },
    methods: {
      addTags() {
        const {name} = this.$route
        if (name) {
          this.actionTagName = name
          this.$store.dispatch('tagsView/addView', this.$route)
        }
      },
      removeTags(view) {
        this.$store.dispatch('tagsView/removeView', view)
      },
      removeAllTags() {
        this.$store.dispatch('tagsView/removeAllView')
      },
      removeOtherTags(type) {
        this.$store.dispatch('tagsView/removeOtherView', type)
      },
      removeOtherTagsByBtn(view, type) {
        this.$store.dispatch('tagsView/removeOtherViewByBtn', {view, type})
      },
      scrollLeft() {
        const tagsViewScrollWhite = this.$refs.tagsViewScroll.$el.clientWidth
        let position = this.$refs.tagsViewScroll.getScrollPosition() - tagsViewScrollWhite / 2
        if (position < 0) {
          position = 0
        } else {
          this.position = position
        }
        this.$refs.tagsViewScroll.setScrollPosition(position, 300)
      },
      scrollRight() {
        const tagsViewScrollWhite = this.$refs.tagsViewScroll.$el.clientWidth
        const tagsViewScrollDivWhite = this.$refs.tagsViewScrollDiv.scrollWidth
        let position = this.$refs.tagsViewScroll.getScrollPosition() + tagsViewScrollWhite / 2
        if (position > tagsViewScrollDivWhite) {
          position = tagsViewScrollDivWhite - tagsViewScrollWhite
        } else {
          this.position = position
        }
        this.$refs.tagsViewScroll.setScrollPosition(position, 300)
      }
    },

    created() {
      this.addTags()
    },
    watch: {
      '$route.path'() {
        this.addTags()
      }
    }
  }
</script>

<style scoped>

</style>
